<template>
  <div>
    <div class="title">
      <img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="">
      猜你喜欢
    </div>
    <ul>
      <router-link tag="li"
      class="item" v-for="item of recommendList" :key="item.id"
      :to="'/detail/'+item.id"
      >
        <img :src="item.imgUrl" class="item-img">
        <div class="item-info">
          <p>{{item.desc}}</p>
          <p>
            <img src="../../../assets/images/星星.png" class="star">
            <span>1259条评论</span>
          </p>
          <p><span>￥<em>115</em></span>起<i>余杭区</i></p>
        </div>
      </router-link>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HomeRecommend',
  props: {
    recommendList: Array
  }
}
</script>
<style lang="scss" scoped>
@import '~styles/mixins';
.title{
  padding: 0.24rem 0;
  text-indent: 0.2rem;
  img{
    width: 0.3rem;
    height: 0.3rem;
    vertical-align: -2.5px;
  }
}
ul{
  padding-left: 0.24rem;
  padding-right: .24rem;
  .item{
    width: 100%;
    display: flex;
    padding: 0.2rem 0;
    box-sizing: border-box;
    overflow: hidden;
    .item-img{
      width: 2rem;
      height: 2rem;
    }
    .item-info{
        flex:1;
        padding: 0 .2rem;
        min-width: 4rem;
      p{
        &:nth-of-type(1){
          color: #212121;
          font-size: 0.32rem;
          margin-top: 0.26rem;
          @include ellipsis();
        }
        &:nth-of-type(2){
          font-size: 0.24rem;
          color: #616161;
          height: 0.64rem;
          line-height: 0.64rem;
          .star{
          width: 0.5rem;
          height: 0.5rem;
          position: relative;
          top: -1.5px
          }
        }
        &:nth-of-type(3){
          color: #616161;
          font-size: 0.24rem;
          line-height: 0.4rem;
          span{
            color: #ff8300;
            font-size: 0.24rem;
            line-height: 0.4rem;
          }
          em{
            font-size: .4rem;
            color: #ff8300;
          }
          i{
            float: right;
            margin-right: 0.3rem;
            line-height: 0.4rem;
          }
        }
      }
    }
  }
}
</style>
